<template>
<div class="task-logs">
    <div class="box-top">
        <el-form @submit.native.prevent>
            <el-form-item label="日志ID">
                <!-- <el-input-number :controls="false" clearable placeholder="请输入日志ID" v-model="form.logId"></el-input-number> -->
                <el-input type="number" clearable placeholder="请输入日志ID" v-model="form.logId"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select clearable v-model="form.jobState" placeholder="请选择状态">
                    <el-option v-for="(item, i) in jobStateList.slice(0, -2)" :key="i" :label="item" :value="i"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="计划执行时间">
                <el-date-picker v-model="form.planTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="执行开始时间">
                <el-date-picker v-model="form.jobStartTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="执行结束时间">
                <el-date-picker v-model="form.jobEndTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item style="margin-bottom:8px !important;" label="">
                <el-button type="primary" v-preventReClick="2000" @click="search">查询</el-button>
                <el-button v-preventReClick="2000" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="box-table">
        <el-table height="100%" v-loading="loading" :data="tableData" tooltip-effect="dark">
            <template slot="empty">
                <no-data :types="isSearch">
                    <span>暂无数据</span>
                </no-data>
            </template>
            <el-table-column prop="logId" label="日志ID" show-overflow-tooltip></el-table-column>
            <el-table-column prop="scheduleName" label="任务名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createOper" label="提交人" show-overflow-tooltip></el-table-column>
            <el-table-column label="状态" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{jobStateList[scope.row.jobState]}}
                </template>
            </el-table-column>
            <el-table-column sortable prop="createTime" label="计划执行时间" show-overflow-tooltip min-width="100"></el-table-column>
            <el-table-column sortable prop="jobStartTime" label="执行开始时间" show-overflow-tooltip min-width="100"></el-table-column>
            <el-table-column sortable prop="jobEndTime" label="执行结束时间" show-overflow-tooltip min-width="100"></el-table-column>
            <el-table-column sortable prop="costTime" label="运行时长(s)" show-overflow-tooltip min-width="100"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleCheck(scope.row)">查看</el-button>
                    <el-button type="text" :disabled="![3, 4, 5].includes(scope.row.jobState)" @click="handleReRun(scope.row)">重跑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="tableData.length>0" class="box-pagenation">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
    <check-dialog v-if="checkDialogData.show" :data="checkDialogData"></check-dialog>
</div>
</template>

<script>
import {
    mapGetters
} from 'vuex'
import moment from 'moment'
import NoData from '@/components/NoData'
import CheckDialog from './CheckDialog'
export default {
    name: 'TaskLogs',
    components: {
        NoData,
        CheckDialog
    },
    data () {
        return {
            checkDialogData: {
                show: false,
                form: ''
            },
            loading: false,
            form: {
                logId: '',
                jobState: '',
                planTime: [],
                jobStartTime: [],
                jobEndTime: []
            },
            total: 0,
            pageSize: 10,
            currentPage: 1,
            tableData: [],
            isSearch: false,
            jobStateList: ['准备中', '排队中', '运行中', '运行成功', '出错终止', '用户终止', '等待中', '重跑中', '可执行']
        }
    },
    created () {
        this.init()
    },
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId'
        })
    },
    methods: {
        handleReRun (item) {
            let params = {
                projectId: this.projectId,
                logId: item.logId
            }
            this.$post('/experiment/redoHistoryJobs', params).then(res => {
                this.$message.success('重跑成功')
                this.init()
            })
        },
        search () {
            this.currentPage = 1
            this.isSearch = true
            this.init()
        },
        init () {
            this.loading = true
            const { jobState, logId, planTime, jobStartTime, jobEndTime } = this.form
            const params = {
                projectId: this.projectId,
                scheduleId: null,
                jobState,
                scheduleName: '',
                createOper: '',
                logId,
                planTimeStart: planTime && planTime[0] && moment(planTime[0]).format('YYYY-MM-DD HH:mm:ss'),
                planTimeEnd: planTime && planTime[1] && moment(planTime[1]).format('YYYY-MM-DD HH:mm:ss'),
                jobStartTimeStart: jobStartTime && jobStartTime[0] && moment(jobStartTime[0]).format('YYYY-MM-DD HH:mm:ss'),
                jobStartTimeEnd: jobStartTime && jobStartTime[1] && moment(jobStartTime[1]).format('YYYY-MM-DD HH:mm:ss'),
                jobEndTimeStart: jobEndTime && jobEndTime[0] && moment(jobEndTime[0]).format('YYYY-MM-DD HH:mm:ss'),
                jobEndTimeEnd: jobEndTime && jobEndTime[1] && moment(jobEndTime[1]).format('YYYY-MM-DD HH:mm:ss'),
                pageSize: this.pageSize,
                pageNum: this.currentPage
            }
            this.$post('/experiment/queryScheduleLogs', params).then(res => {
                if (res) {
                    const {
                        total,
                        rows
                    } = res
                    this.total = total
                    this.tableData = rows
                }
            }).finally(() => {
                this.loading = false
            })
        },
        reset () {
            this.form = {
                logId: '',
                jobState: '',
                planTime: [],
                jobStartTime: [],
                jobEndTime: []
            }
            this.isSearch = false
            this.currentPage = 1
            this.init()
        },
        handleCheck (item) {
            this.checkDialogData = {
                show: true,
                form: item.scheduleLog
            }
        },
        handleCurrentChange (val) {
            this.currentPage = val
            this.init()
        },
        handleSizeChange (val) {
            this.pageSize = val
            this.init()
        }
    }
}
</script>
<style lang="less">
    .task-logs {
        height: 100%;
        overflow: hidden;
        .box-table {
            height: calc(100% - 100px);
        }
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}
    }
</style>
